<template>
    <div id="create-edit-container">
        <el-card>
            <!--头部-->
            <div slot="header" class="row">
                <div class="col-auto mr-auto">{{modalTitle}}</div>
                <div class="pull-right">
                    <el-button type="primary" style="margin-right: 15px" @click="saveModel"   :loading="stateManager.buttonLoading" >{{stateManager.buttonLoading?'提交中':'保存'}}</el-button>
                </div>
            </div>
            <el-form ref="model" :model="model" :rules="ruleValidate">
                <el-row type="flex" :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="文章标题" prop="title">
                            <el-input v-model="model.title" placeholder="请填写文章标题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="文章副标题" prop="sub_title">
                            <el-input v-model="model.sub_title" placeholder="请填写文章副标题"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="素材标签" prop="tags">
                            <el-select v-model="model.tags"
                                       filterable
                                       multiple
                                       allow-create
                                       style="width: 100%" placeholder="请选择素材标签">
                                <el-option
                                    v-for="(item,key) in tags"
                                    :key="key"
                                    :label="item.label"
                                    :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="文章栏目" prop="category">
                            <el-cascader :props="{multiple: true,checkStrictly: true,
                        label: 'name',children: 'children',value:'id'}"
                                         :options="categoryList"
                                         style="width: 100%;"
                                         collapse-tags
                                         clearable
                                         placeholder="请选择文章栏目" v-model="model.category"></el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="文章封面" class="image-picker" prop="cover_image">
                            <br>
                            <div class="el-upload" @click="imgPick">
                                <img v-if="model.thumbnail_path" :src="model.thumbnail_path" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20">
                    <el-col :span="24">
                        <el-form-item class="editor" label="文章内容" prop="content">
                            <br>
                            <tiny-editor ref="edit" v-model="model.content"></tiny-editor>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <image-picker :stateManager="manager" :multiple="false" @submitPicture="getPicture"></image-picker>
        </el-card>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import imagePicker from '@/components/imagePicker'
  import tinyEditor from '@/components/Tinymce'

  export default {
    props: {
      id: 0,
    },
    components: {
      'tiny-editor': tinyEditor,
      'image-picker': imagePicker,
    },
    data: function () {
      return {
        stateManager: {
          refreshList: true,
          editDialogVisible: false,
          editModelId: null,
          listLoading: true,
          buttonLoading: false,
        },
        model: this.$modelDataSource({
          url: '/api/cms/blog',
          dataKey: 'model',
          attributes: {
            id: 0,
            title: '',
            sub_title: '',
            content: '',
            thumbnail_path: '',
            cover_image: '',
            tags:[],
            category: [],
          },
        }),
        content: '',
        manager: {DialogVisible: false},
        isLoading: false,
        ruleValidate: {
          title: [
            {required: true, message: '请填写文章标题', trigger: 'blur'},
          ],
          content: [
            {required: true, message: '请填写文章内容', trigger: 'blur'},
          ],
          category: [
            {required: true, message: '请选择文章栏目', trigger: ['blur', 'array']},
          ],
        },
      }
    },
    created () {
      this.$store.dispatch('cms/fetchCategoryList')
      this.$store.dispatch('cms/fetchTags')
      this.model.fetch(this.id, { include:'update' })
    },
    methods: {
      getPicture: function (e) {
        this.model.cover_image = e.Listids[0]
        this.model.thumbnail_path = e.listthumbs[0]
      },
      imgPick () {
        this.manager.DialogVisible = true
      },
      saveModel: function () {
        let self = this
        self.$refs['model'].validate((valid) => {
          if (valid) {
            self.isLoading = false
            self.stateManager.buttonLoading = true
            self.model.save(
              function () {
                self.$message.success('保存成功')
                self.stateManager.buttonLoading = false
                self.$router.push({name: 'cms-blog'})
              }, function (errors) {
                self.stateManager.buttonLoading = false
                self.$message.error('保存失败')
              })
          }
          else {
            console.log('表单验证失败')
          }
        })
      },
    },
    computed: {
      ...mapGetters([
        'tags',
        'categoryList',
      ]),
      modalTitle () {
        switch (this.id) {
          case 0:
            return '添加文章'
            break
          default:
            return '编辑文章'
        }
      },
    },
  }
</script>
